<template>
  <mainContainer>
    数据概况
    <avue-data-display :option="optionPanel"></avue-data-display>
  </mainContainer>
  <!-- <mainContainer>
    <avue-data-tabs :option="option"></avue-data-tabs>
  </mainContainer>-->
  <mainContainer>
    <el-row>
      <el-col :span="6">
        智能助手
        <div style="display: flex;  align-items: center;
  justify-content: center;height: 100%;">
          <el-progress type="dashboard" :percentage="80" :stroke-width="15">
            <template #default="{ percentage }">
              <span class="percentage-value">4项</span>
              <span class="percentage-label">待处理</span>
            </template>
          </el-progress>
        </div>
      </el-col>
      <el-col :span="18">
        <div ref="welSaleDataView" class="wel-data-view"></div>
      </el-col>
    </el-row>
  </mainContainer>
  <mainContainer>
    <div ref="welDataView" class="wel-data-view"></div>
  </mainContainer>
</template>

<script >
import * as echarts from 'echarts'
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'

export default defineComponent({
  setup() {
    const form = reactive({
      mySaleChart: null,
      myChart: null,
    })
    const welDataView = ref(null)
    const welSaleDataView = ref(null)
    onMounted(() => {
      form.myChart = echarts.init(welDataView.value)
      form.mySaleChart = echarts.init(welSaleDataView.value)
      form.mySaleChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            emphasis: {
              focus: 'series',
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: 'Email',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series',
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Union Ads',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series',
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: 'Video Ads',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series',
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: 'Search Engine',
            type: 'bar',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
              focus: 'series',
            },
            markLine: {
              lineStyle: {
                type: 'dashed',
              },
              data: [[{ type: 'min' }, { type: 'max' }]],
            },
          },
          {
            name: 'Baidu',
            type: 'bar',
            barWidth: 5,
            stack: 'Search Engine',
            emphasis: {
              focus: 'series',
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120],
          },
          {
            name: 'Google',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series',
            },
            data: [120, 132, 101, 134, 290, 230, 220],
          },
          {
            name: 'Bing',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series',
            },
            data: [60, 72, 71, 74, 190, 130, 110],
          },
          {
            name: 'Others',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series',
            },
            data: [62, 82, 91, 84, 109, 110, 120],
          },
        ],
      })
      form.myChart.setOption({
        title: {
          text: 'Stacked Line',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      })
    })
    const optionPanel = {
      span: 6,
      data: [
        {
          click: function (item) {
            alert(JSON.stringify(item))
          },
          count: 100,
          decimals: 2,
          title: '日活跃数',
        },
        {
          click: function (item) {
            alert(JSON.stringify(item))
          },
          count: 3000,
          title: '月活跃数',
        },
        {
          click: function (item) {
            alert(JSON.stringify(item))
          },
          count: 10000,
          title: '年活跃数',
        },
        {
          click: function (item) {
            alert(JSON.stringify(item))
          },
          count: 300,
          title: '周活跃数',
        },
      ],
    }
    const option = {
      data: [
        {
          click: function (item) {
            alert(JSON.stringify(item))
          },
          title: '分类统计',
          subtitle: '实时',
          count: 7993,
          allcount: 10222,
          text: '当前分类总记录数',
          color: 'rgb(27, 201, 142)',
          key: '类',
        },
        {
          click: function (item) {
            alert(JSON.stringify(item))
          },
          title: '附件统计',
          subtitle: '实时',
          count: 3112,
          allcount: 10222,
          text: '当前上传的附件数',
          color: 'rgb(230, 71, 88)',
          key: '附',
        },
        {
          click: function (item) {
            alert(JSON.stringify(item))
          },
          title: '文章统计',
          subtitle: '实时',
          count: 908,
          allcount: 10222,
          text: '评论次数',
          color: 'rgb(178, 159, 255)',
          key: '评',
        },
      ],
    }
    let setChart = () => {}
    return {
      option,
      welDataView,
      welSaleDataView,
      optionPanel,
      ...toRefs(form),
      setChart,
    }
  },
})
</script>
<style lang="scss">
.wel-data-view {
  width: 100%;
  height: 450px;
}
.survey-card {
  display: flex;
  justify-content: space-between;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style>